---
slug: /options/hotspot/zoom
---

import View360 from "@site/src/components/View360";
import OptionDescriptor from "@site/src/components/OptionDescriptor";
import AutoResize from "@site/src/components/demo/AutoResize";

<OptionDescriptor type="boolean" defaultVal="false" added="4.0.0" />

Apply a scale to the hotspot to match the current camera zoom level.

If `false`, the hotspot element remains the same size regardless of the value of camera zoom.
If `true`, the hotspot element resizes to match the current camera zoom.

## Example
In order to make the difference easier to see, the examples below intentionally disabled controls other than `zoom`.

### zoom: false
<View360
  projectionOptions={{
    src: [
      "/pano/cube/FishermansBastion/posx.jpg",
      "/pano/cube/FishermansBastion/negx.jpg",
      "/pano/cube/FishermansBastion/posy.jpg",
      "/pano/cube/FishermansBastion/negy.jpg",
      "/pano/cube/FishermansBastion/posz.jpg",
      "/pano/cube/FishermansBastion/negz.jpg"
    ]
  }}
  rotate={false}
  gyro={false}
  projectionType="cubemap"
  hotspot={{ zoom: false }}
  showExampleCode
  showControlBar
  license="fisherman">
  <div className="view360-hotspots">
    <div className="view360-hotspot demo-hotspot" data-yaw="0" data-pitch="0">1</div>
  </div>
</View360>

### zoom: true
<View360
  projectionOptions={{
    src: [
      "/pano/cube/FishermansBastion/posx.jpg",
      "/pano/cube/FishermansBastion/negx.jpg",
      "/pano/cube/FishermansBastion/posy.jpg",
      "/pano/cube/FishermansBastion/negy.jpg",
      "/pano/cube/FishermansBastion/posz.jpg",
      "/pano/cube/FishermansBastion/negz.jpg"
    ]
  }}
  rotate={false}
  gyro={false}
  projectionType="cubemap"
  hotspot={{ zoom: true }}
  showExampleCode
  showControlBar
  license="fisherman">
  <div className="view360-hotspots">
    <div className="view360-hotspot demo-hotspot" data-yaw="0" data-pitch="0">1</div>
  </div>
</View360>
